<template>
  <div>
    <van-popup
        id="selectPeoplePopup"
        :show="showPicker"
        position="bottom"
        :style="{ height: '80%' }"
        @click-overlay="$emit('cancel')"
    >
      <div style="display: flex; flex-direction: column; width: 100vw; align-items: center">
        <van-search
            style="width: 100%;"
            v-model="active.searchStr"
            placeholder="请输入搜索关键词"
            show-action
            input-align="center"
            @search="onSearch"
            @cancel="onCancel"
        />

        <van-list
            style="width: 100%"
            v-model:loading="active.loading"
            :offset="50"
            :finished="active.finished"
            finished-text="没有更多了"

            @load="onLoad"
        >
          <van-cell-group
              inset
              class="this-card"
              v-for="(item, index) in active.peopleList"
              :key="item"
              @click="clickItem(index)"
          >
            <van-cell title="姓名" :value="item.name"/>
            <van-cell title="电话" :value="item.phone"/>
            <van-cell title="组织" :value="item.orgName"/>
          </van-cell-group>
        </van-list>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {getPeopleList} from '@/api/api'
import {showFailToast} from 'vant'

const emit = defineEmits(['cancel', 'selectPeople'])

defineProps({
  showPicker: {
    type: Boolean,
    default: false
  }
})

// 本组件响应式对象
const active = ref({
  peopleList: [],
  searchStr: '',
  size: 50,
  page: 1,
  loading: false,
  finished: false
})

onMounted(() => {
  updatePeopleList()
})

const onSearch = () => {
  resetPeopleList()
}

const onCancel = () => {
  resetPeopleList()
}

const onLoad = () => {
  console.log('!!!!!!!!!!!!!!!!!!!!!!!!')
  active.value.page += 1
  updatePeopleList()
}

const clickItem = (index) => {
  emit('selectPeople', active.value.peopleList[index])
}

const resetPeopleList = () => {
  active.value.peopleList = []
  active.value.page = 1
  active.value.finished = false

  updatePeopleList()
}

const updatePeopleList = () => {
  getPeopleList(active.value.searchStr, active.value.page, active.value.size)
      .then((res) => {
        if (res.success) {
          console.log(res.data.data.length)
          if (res.data.data.length > 0) {
            res.data.data.forEach((i) => {
              active.value.peopleList.push(i)
              active.value.loading = false
            })
          } else {
            active.value.finished = true
          }
        } else {
          showFailToast({
            duration: 3,
            forbidClick: true,
            message: '获取数据失败，请尝试重新点击保存'
          })
        }
      })
      .catch(() => {
        showFailToast({
          duration: 3,
          forbidClick: true,
          message: '获取数据失败，请尝试重新点击保存'
        })
      })
}
</script>

<style lang="less" scoped>
.this-card {
  margin: 1rem;
  box-shadow: 0 0 0 2px rgb(255, 255, 255),
  0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
</style>
